{include file='header'/}
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <table id="model_table" lay-filter="model_table"></table>
    </div>
</div>
<script type="text/html" id="add_toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md"
            data-open="{:url('models/add')}"
            data-title="添加模型" data-reload="2">
        <i class="layui-icon layui-icon-add-1"></i>
        添加
    </button>
    <button class="pear-btn pear-btn-md layui-bg-blue"
            data-open="{:url('models/import')}"
            data-title="导入模型" data-reload="2" data-width="780" data-height="580">
        <i class="layui-icon layui-icon-download-circle"></i>
        导入模型
    </button>
</script>

<script type="text/html" id="statusTpl">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用"
           lay-filter="switchStatus"
           data-href="{:url('models/modify')}?id={{d.id}}&field=status" {{d.status== 1 ? 'checked' : '' }} />
</script>

<script type="text/html" id="barDemo">
    <button class="pear-btn pear-btn-zise pear-btn-xs" title="字段管理"
            data-open-full="{:url('models_field/index')}?model_id={{d.id}}"
            data-title="字段管理-{{d.name}}" data-reload="2">
        <i class="layui-icon layui-icon-dollar"></i>
    </button>
    <button class="pear-btn pear-btn-primary pear-btn-xs" title="编辑"
            data-open="{:url('models/edit')}?id={{d.id}}"
            data-title="编辑" data-reload="2">
        <i class="layui-icon layui-icon-edit"></i>
    </button>
    <a class="pear-btn pear-btn-xs" lay-event="more">
        更多
        <i class="layui-icon layui-icon-down"></i>
    </a>
</script>

{include file='footer'/}
<script>
  layui.use(['table', 'jquery', 'drawer', 'dropdown'], function () {
    var $ = layui.jquery;
    var table = layui.table;
    var dropdown = layui.dropdown;
    table.render({
      elem: '#model_table'
      , toolbar: '#add_toolbar'
      , defaultToolbar: [{
        layEvent: 'refresh',
        icon: 'layui-icon-refresh',
        title: '刷新'
      }, 'filter', 'exports']
      , method: 'get'
      , url: "{:url('models/index')}"
      , parseData: function (res) {
        return {
          "code": 0,
          "msg": res.msg,
          "count": res.count,
          "data": res.data
        };
      }
      , cellMinWidth: 100
      , cols: [[
        {field: 'id', title: 'ID', width: 60, align: 'center', sort: true}
        , {field: 'name', title: '模型名称', width: 120}
        , {field: 'alias', title: '别名', width: 130}
        , {field: 'index_tpl', title: '栏目模板', minWidth: 150}
        , {field: 'list_tpl', title: '列表模板', minWidth: 150}
        , {field: 'show_tpl', title: '内容模板', minWidth: 150}
        , {field: 'type', title: '类型', width: 120}
        , {field: 'remark', title: '备注说明'}
        , {field: 'status', title: '状态', templet: '#statusTpl', align: 'center', width: 100}
        , {fixed: 'right', title: '操作', toolbar: '#barDemo', align: 'center', width: 180}
      ]]
      , id: 'testReload'
      , page: true
      , limit: 10
    });

    //监听排序
    table.on('sort(model_table)', function (obj) {
      table.reload('testReload', {
        initSort: obj
        , where: {
          field: obj.field
          , order: obj.type
        }
      });
    });

    $('.hui-form-search .layui-btn').on('click', function () {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
    $('.hui-form-search .reset').on('click', function () {
      window.location.reload();
    });

    //监听行工具事件
    table.on('toolbar(model_table)', function (obj) {
      console.log(obj.event);
      if (obj.event === 'refresh') {
        table.reload('testReload');
      }
    });

    table.on('tool(model_table)', function (obj) {
      var data = obj.data;
      console.log(data);
      if (obj.event === 'more') {
        dropdown.render({
          elem: this, // 触发事件的 DOM 对象
          show: true, // 外部事件触发即显示
          data: [{
            title: '预览',
            id: 'detail'
          }, {
            title: '导出',
            id: 'export'
          }, {
            title: '删除',
            id: 'del'
          }],
          click: function (menudata) {
            if (menudata.id === 'detail') {
              layer.msg('查看操作，当前行 ID:' + data.id);
            } else if (menudata.id === 'export') {
              location.href = "{:url('models/export')}?id=" + data.id;
            } else if (menudata.id === 'del') {
              layer.confirm('真的删除行 [' + data.name + '] 么', function (index) {
                obj.del();
                layer.close(index);
                $.post("{:url('models/delete')}", {id: data.id}, function (res) {
                  if (res.code !== 200) {
                    return hui_msg(res.msg, 2);
                  }
                  hui_msg(res.msg, 1, function () {
                    table.reload('testReload');
                  });
                });
              });
            }
          },
          align: 'right', // 右对齐弹出
          style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
        })
      }
    })

  });
</script>
</body>
</html>
